<template>
  <div class="order">
    <!-- <div class="order-top"><span>我的订单</span></div> -->
    <UserTop></UserTop>
    <div class="container">
      <div class="order-main">
        <div class="order-shop">
          <!-- 后面遍历order-shop -->
          <ul class="order-th">
            <li class="order-th1">
              <span class="date">2022-08-12 11:24 </span>
              <span class="order-id"
                >订单号：<a href="javascript:;"> 166017951835867</a></span
              >
            </li>
            <li class="order-th2">单价</li>
            <li class="order-th3">数量</li>
            <li class="order-th4">商品操作</li>
            <li class="order-th5">实付金额</li>
            <li class="order-th6">查看详情 ></li>
          </ul>

          <div class="order-item">
            <!-- 后面遍历order-item -->
            <ul class="order-list">
              <li class="order-list-con1">
                <img src="../../../assets/avatar.jpeg" />
                <span class="item-msg">ACIL E1 颈挂式蓝牙耳机</span>
              </li>
              <li class="order-list-con2">
                <span>¥ 199.00 </span>
              </li>
              <li class="order-list-con3">
                <span>1</span>
              </li>
              <li class="order-list-con4">
                <button>删除此订单</button>
              </li>
            </ul>

            <ul class="shop-pay">
              <li class="order-list-con5">
                <span>¥ 2898</span>
              </li>
              <li class="order-list-con6">
                <button>交易关闭</button>
              </li>
            </ul>
          </div>
          <div class="order-item">
            <!-- 后面遍历order-item -->
            <ul class="order-list">
              <li class="order-list-con1">
                <img src="../../../assets/avatar.jpeg" />
                <span class="item-msg">ACIL E1 颈挂式蓝牙耳机</span>
              </li>
              <li class="order-list-con2">
                <span>¥ 199.00 </span>
              </li>
              <li class="order-list-con3">
                <span>1</span>
              </li>
              <li class="order-list-con4">
                <button>删除此订单</button>
              </li>
            </ul>

            <ul class="shop-pay">
              <li class="order-list-con5">
                <span>¥ 2898</span>
              </li>
              <li class="order-list-con6">
                <button>现在付款</button>
                <div>交易关闭</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UserTop from "../components/usertop/index.vue";
export default {
  name: "OrderList",
  components: { UserTop },
};
</script>

<style lang="less" scoped>
.order {
  // float: left;
  color: #666666;
  width: 990px;
  .container{
    border-radius: 8px;
  
  .order-top {
    border: 1px solid #dbdbdb;
    height: 55px;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 7px rgb(0 0 0 / 6%);
    background: linear-gradient(#fbfbfb, #ececec);
    span {
      margin-left: 20px;
      font-style: #786262;
      font-size: 14px;
      line-height: 55px;
    }
  }
  .order-main {
    width: 990px;
    .order-shop {
      .order-th {
        height: 40px;
        border: 1px solid #dbdbdb;
        list-style: none;

        & > li {
          float: left;
          height: 40px;
          line-height: 40px;
        }
        .order-th1 {
          width: 40%;

          .order-id {
            a {
              font-style: normal;
              cursor: pointer;
              color: #6b95ea;
              text-decoration: none;
            }
          }
        }
        .order-th2,
        .order-th3,
        .order-th4,
        .order-th5,
        .order-th6 {
          width: 12%;
        }
      }
      .order-item {
        .order-list {
          width: 72%;
          // background-color: #fff;
          list-style: none;
          & > li {
            float: left;
            height: 115px;
            text-align: center;
            line-height: 115px;
            background-color: #fff;

            // border: 1px solid #786262;
          }
          .order-list-con1 {
            width: 50%;
            text-align: left;
            img {
              width: 80px;
              height: 80px;
              line-height: 80px;
              float: left;
              margin: 18px 10px;
              vertical-align: middle;
            }
            item-msg {
              float: left;
              width: 230px;
              margin: 0 10px;
              line-height: 18px;
            }
          }
          .order-list-con2 {
            width: 18%;
          }
          .order-list-con3 {
            width: 16%;
          }
          .order-list-con4 {
            width: 14%;
            display: flex;
            align-items: center;
            button {
              margin-left: 20px;
              width: 70px;
              height: 30px;
              background-color: #ff6d6d;
              color: #fff;
              border: none;
              display: block;
            }
          }
        }
        .shop-pay {
          width: 28%;
          float: left;
          list-style: none;
          background-color: #fff;
          .order-list-con5 {
            width: 50%;
          }
          .order-list-con6 {
            width: 48%;
          }
          & > li {
            float: left;
            height: 115px;
            line-height: 115px;
            // border: 1px solid #786262;
            text-align: center;
          }
        }
      }
    }
    }}
}
</style>
